<template>
  <nav class="bottom-nav">
    <div class="nav-item" :class="{ 'active': currentPath === '/' }" @click="goToHome">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </div>
    <div class="nav-item" :class="{ 'active': currentPath === '/cart' }" @click="goToCart">
      <i class="fa fa-shopping-cart"></i>
      <span>购物车</span>
      <span class="cart-count">{{ cartCount }}</span>
    </div>
    <div class="nav-item" :class="{ 'active': currentPath === '/orderUser' }" @click="goToOrder">
      <i class="fa fa-receipt"></i>
      <span>订单</span>
    </div>
    <div class="nav-item" :class="{ 'active': currentPath === '/profile' }" @click="goToUserCenter">
      <i class="fa fa-user"></i>
      <span>个人中心</span>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'FootComponent',
  props: {
    cartCount: {
      type: Number,
      default: 0
    },
    currentPath: {
      type: String,
      default: '/'
    }
  },
  methods: {
    goToHome() {
      this.$emit('navigate', '/');
    },
    goToCart() {
      this.$emit('navigate', '/cart');
    },
    goToOrder() {
      this.$emit('navigate', '/orderUser');
    },
    goToUserCenter() {
      this.$emit('navigate', '/profile');
    }
  }
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  z-index: 99;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
}

.nav-item.active {
  color: #7af6fa;
}

.nav-item i {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.nav-item span {
  font-size: 0.75rem;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ffc0cb;
  color: white;
  font-size: 0.6rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
